<template>
  <div>
    <!-- 标题 -->
    <el-row>
      <el-col :span="6">
        <div id="title">
          <i class="el-icon-s-comment"></i>
          <b>日志查看</b>
        </div>
      </el-col>
      <!-- 搜索内容 -->
      <el-col :span="18">
        <el-col :span="18">
          <el-input v-model="inputName"
                    size="small"
                    placeholder="搜索内容"
                    @keyup.enter.native="search(inputName)">
          </el-input>
        </el-col>
        <el-col :span="6"></el-col>
      </el-col>
    </el-row>
    <el-table :data="tableData">
      <el-table-column label="操作者id"
                       prop="uid"
                       align="center"
                       width="80"></el-table-column>
      <el-table-column label="操作对象"
                       prop="target"
                       align="center"
                       width="80">
      </el-table-column>

      <el-table-column label="操作类型"
                       prop="type"
                       align="center"
                       width="80"></el-table-column>

      <el-table-column label="详细内容"
                       prop="content"
                       align="center"></el-table-column>

    </el-table>
    <!-- 分页 -->
    <el-pagination @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="currentPage"
                   :page-sizes="[5, 10, 15]"
                   :page-size="size"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="total">
    </el-pagination>

  </div>
</template>

<script>
//导入axios
import axios from "../../axios_config";

export default {
  data () {
    return {
      tableData: [], //表格数据
      currentComment: {}, //当前评论
      currentPage: 1, //当前页
      total: 0, //总条数
      totalPage: 0, //总页数
      size: 5, //每一页大小

      inputName: "", //搜索栏内容

      dialogVisible: false,
      currentOrder: {},
      refresh: true
    };
  },
  methods: {
    //模糊查询
    search (inputName) {
      this.inputName = inputName;
      this.currentPage = 1;
      this.findByPage();
    },

    //根据页码查询当前页数据
    findByPage () {
      axios
        .get(
          "http://192.168.11.18:8080/log/select/?page=" +
          this.currentPage +
          "&size=" +
          this.size +
          "&content=" +
          this.inputName
        )
        .then(res => {
          console.log(res);
          //评论信息
          this.tableData = res.data.data;
          //分页数据
          this.total = res.data.total;
          this.totalPage = res.data.totalPage;
          this.currentPage = res.data.currentPage;
          this.size = res.data.pageSize;
        });
    },
    //修改每一页大小
    handleSizeChange (size) {
      console.log("选择" + size);
      this.inputName = "";
      this.size = size;
      //发送请求获取当前页数据    page    size
      this.findByPage();
    },

    //选择第几页
    handleCurrentChange (page) {
      console.log("选择:" + page + "页");
      this.currentPage = page;
      this.inputName = "";
      //发送请求获取当前页数据    page    size
      this.findByPage();
    }
  },
  mounted () {
    this.findByPage();
  }
};
</script>

<style scoped>
#title {
  margin-left: 10px;
  font-size: 20px;
}
</style>
